<template>
    <el-container >
      <el-header><img src="../assets/heima.png"><span>电商后台管理系统</span><el-button type="info" @click="logout">退出</el-button></el-header>
      <el-container class="main-container">
        <el-aside   :width="isCollapsed ? '64px' : '200px'">
          <div class="toggleBtn" @click="toggleCollapse">|||</div>
          <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409eff" :unique-opened="true" :collapse="isCollapsed" :collapse-transition="false" :router="true"  :default-active="defaultAct">
            <!--一级菜单-->
            <el-submenu :index="item.id+''" v-for="(item,index) in menulist" :key="item.id">
              <template slot="title">
                <!--图标-->
                <i :class="iconlist[index]"></i>
                <!--文本-->
                <span>{{item.authName}}</span>
              </template>
              <!--            二级菜单-->
              <el-menu-item :index="'/'+subitem.path" v-for="(subitem) in item.children" :key="subitem.id" @click="savedefact('/'+subitem.path)">
                <template slot="title">
                  <!--图标-->
                  <i class="el-icon-menu"></i>
                  <!--文本-->
                  <span>{{subitem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--路由占位符-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

</template>

<script>
  export default {
    created:function(){
      this.getMenuList();
    },
    data:function(){

      return {
        menulist:[],
        iconlist:['iconfont icon-users','iconfont icon-shangpin','iconfont icon-danju','iconfont icon-tijikongjian','iconfont icon-baobiao'],
        isCollapsed: false,
        defaultAct: ''
      }

    },
    methods:{
      logout:function () {
        window.sessionStorage.clear();
        this.$router.push('/login');
      },
      getMenuList:function () {
        this.$axios.get('menus').then(
          (data)=> {
            var res=data.data;
            if(res.meta.status!='200') return this.$message.error("获取菜单失败!");
            var menudata=res.data;
           this.menulist=menudata;
          }
        );
      },
      toggleCollapse(){
        this.isCollapsed = !this.isCollapsed ;
      },
      savedefact(arg1){
        this.defaultAct=arg1;
        window.sessionStorage.setItem('default-active',arg1)
      }
    }
  }
</script>

<style scoped lang="less">
  html, body, .el-container {
    width: 100%;
    height: 100%;
  }

  .el-header {
    height: 135px;
    width: 100%;
    background-color: #2b4b6b;
    color: #333;
    line-height: 60px;
    position: relative;
    font-size: 28px;

    img {
      position: absolute;
      left: 0;
      top: 0;
    }

    span {
      margin-left: 50px;
      color: #fff;
    }

    .el-button {
      margin-top: 10px;
      margin-right: 15px;
      position: absolute;
      right: 0;

    }

  }

  .main-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .el-aside {
    background-color: #333744;
    height: 100%;
    box-sizing: border-box;
    .el-menu {
      border-right: none;
    }
  }

  .iconfont {
    margin-right: 10px;
  }
  .toggleBtn{
    text-align: center;
    height: 28px;
    line-height: 28px;
    color:#fff;
    font-size: 12px;
    letter-spacing: 5px;
    cursor: pointer;
  }
</style>
